import type { PaginationProps } from 'antd';
import { Card } from 'antd';
import { Button, Table, Pagination } from 'antd';
import type { TableRowSelection } from 'antd/es/table/interface';
import BaseModal from '../BaseModal';
import type { InfoModalProps } from '@/components/BaseModal/infoModal';
import InfoModal from '@/components/BaseModal/infoModal';
import './index.less';
import { themeButtonStyle } from '../../../config/globalStyle';
const showTotal: PaginationProps['showTotal'] = (total) => `共 ${total} 条`;
export interface BaseTableProps<T> {
  columns: any[];
  dataSource: T[];
  uploadName?: string; // 部分表单组件是需要这个发布按钮的
  rowSelection?: TableRowSelection<T>;
  releaseProps?: ReleaseProps;
  editInfoProps?: EditInfoProps;
  RoleSearch?: (props: { handleSearch?: () => void }) => JSX.Element;
  RoleControl?: () => JSX.Element;
  handleSearch?: () => void;
  deleteInfoProps?: InfoModalProps;
  agreeInfoProps?: InfoModalProps;
  rejectInfoProps?: InfoModalProps;
  customPageSize?: customPageSizeProps;
}

export interface ReleaseProps {
  handleOpen?: () => void;
  handleClose?: () => void;
  isModalOpen?: boolean;
  ModalChildren?: (arg: any) => JSX.Element;
  title?: string;
}

export interface EditInfoProps {
  handleOpen?: (params: any) => void;
  handleClose?: () => void;
  isModalOpen?: boolean;
  ModalChildren?: (arg: any) => JSX.Element;
  title?: string;
}

export interface customPageSizeProps {
  handlePageChange?: (a: number, b: number) => void;
  currentPage?: number;
  pageSize?: number;
  total?: number;
  loading?: boolean;
}

/** 奇偶行换色 */
function getRowClassName(record: any, index: number) {
  return index % 2 === 0 ? 'even-row' : 'odd-row';
}
/**
 * todo: 做成一个通用的table  （目前针对usercenter）
 * 由于mock数据变更什么的来不及修改以前写的代码了，先copy一份重构 后续再做迁移
 * @param props
 * @returns
 */
const BaseTable = (props: BaseTableProps<any>) => {
  const {
    columns,
    dataSource,
    uploadName,
    rowSelection,
    RoleControl,
    RoleSearch,
    releaseProps,
    editInfoProps,
    deleteInfoProps,
    agreeInfoProps,
    rejectInfoProps,
    customPageSize: { handlePageChange, pageSize, total, loading, currentPage } = {},
    handleSearch,
  } = props;

  const handleOnchange = (current: number, size: number) => {
    handlePageChange!(current, size);
  };

  const customPagination = {
    // 将“跳至”修改为“跳到”
    jump_to: '前往',
  };

  return (
    <div>
      <Card style={{ marginBottom: 10 }}>
        {RoleSearch && <RoleSearch handleSearch={handleSearch} />}
      </Card>
      <Card>
        {uploadName && (
          <Button
            onClick={releaseProps?.handleOpen}
            style={{ ...themeButtonStyle, marginBottom: '10px' }}
          >
            + {uploadName}
          </Button>
        )}
        {/* 删除信息弹窗 */}
        {deleteInfoProps && <InfoModal {...deleteInfoProps} />}
        {agreeInfoProps && <InfoModal {...agreeInfoProps} />}
        {rejectInfoProps && <InfoModal {...rejectInfoProps} />}
        {editInfoProps && <BaseModal {...editInfoProps} />}
        {/* 发布弹窗 */}
        {uploadName && <BaseModal {...releaseProps} />}
        {RoleControl && <RoleControl />}
        <Table
          loading={loading}
          rowClassName={getRowClassName}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={dataSource}
          size="middle"
          pagination={false}
        />
        <Pagination
          style={{
            display: 'flex',
            justifyContent: 'center',
            marginTop: '20px',
          }}
          size="small"
          current={currentPage}
          defaultPageSize={pageSize}
          total={total}
          showSizeChanger
          showQuickJumper
          onShowSizeChange={handleOnchange}
          onChange={handleOnchange}
          showTotal={showTotal}
          locale={customPagination}
        />
      </Card>
    </div>
  );
};
export default BaseTable;
